<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>easyui.html</title>
    <link rel="stylesheet" href="css/lib.min.css" /> 
    <link rel="stylesheet" href="esayui/easyui.css" /> 
    <link rel="stylesheet" href="esayui/icon.css" />  
    <style>
     
    </style>
  </head>
  <body>
    <h2>手风琴</h2>
    <p>Click on panel header to show its content.</p>
    <div style="margin:20px 0 10px 0;"></div>
    <div class="easyui-accordion" style="width:500px;height:300px;">
      <div title="About" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">
        <h3 style="color:#0099FF;">Accordion for jQuery</h3>
        <p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
      </div>
      <div title="Help" data-options="iconCls:'icon-help'" style="padding:10px;">
        <p>The accordion allows you to provide multiple panels and display one or more at a time. Each panel has built-in support for expanding and collapsing. Clicking on a panel header to expand or collapse that panel body. The panel content can be loaded via ajax by specifying a 'href' property. Users can define a panel to be selected. If it is not specified, then the first panel is taken by default.</p> 		
      </div>
      <div title="TreeMenu" data-options="iconCls:'icon-search'" style="padding:10px 0;">
        <ul class="easyui-tree">
          <li>
            <span>食物</span>
            <ul>
              <li>
                <span>水果</span>
                <ul>
                  <li>苹果</li>
                  <li>橘子</li>
                </ul>
              </li>
              <li>
                <span>蔬菜</span>
                <ul>
                  <li>西红柿</li>
                  <li>carrot</li>
                  <li>cabbage</li>
                  <li>potato</li>
                  <li>lettuce</li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  
    <script src="js/lib.min.js"></script>
    <script src="esayui/jquery.easyui.min.js"></script>
    <script src="esayui/easyui-lang-zh_CN.js"></script>
    <script src="js/esayui.js"></script>
  </body>
</html>
